<template>
  <div
    class="w-full h-[35.375rem] bg-black transition-all duration-200"
    @mouseenter.stop="enableZoom"
    @mouseleave.stop="disableZoom"
    @wheel.stop.prevent="zoomImage"
    ref="myImage"
  >
    <div>
      <img
        class="w-[57.859375rem] h-[26.6rem] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-[3.5rem]"
        src="/src/assets/images/hero_camera_screen_zoom__bltohecbqbv6_xlarge.jpg"
        alt=""
        srcset=""
      />
      <img
        class="w-[59.87125rem] h-[29.120625rem] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
        src="/src/assets/images/hero_camera_hw__l3esjbq1awy2_xlarge_2x.png"
        alt=""
        srcset=""
      />
    </div>
    <!-- 蒙版 -->
    <div
      v-show="isShowMark"
      class="w-screen h-screen bg-mark absolute top-0 left-0 opacity-0 transition-all duration-250"
      ref="mark"
    ></div>
    <!-- translate-x-[-125%] translate-y-[-450%] top-[50%] -->
    <div
      class="absolute z-10 top-[40%] left-[45%] opacity-0 translate-x-[-50%] translate-y-[-50%] text-white text-xll font-semibold transition-all duration-250"
      ref="markTitle"
    >
      新 4800 万像素<br />超广角摄像头，<br />
      分辨率大开。
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
import Big from "big.js";

const myImage = ref(null);
// 尺寸大小
let scale = ref(new Big(1));
let isenter = ref(false);
// 蒙版
const mark = ref(null);
let isShowMark = ref(false);
// 蒙版内容
const markTitle = ref(null);

const enableZoom = () => {
  isenter.value = true;
};
const disableZoom = () => {
  isenter.value = false;
};
const zoomImage = (event) => {
  if (!isenter.value) {
    console.log("0000000");
    return;
  }
  // event.deltaY垂直滚动量一直为150
  let delta = Math.sign(event.deltaY);

  if (delta === 1) {
    // 缩小

    if ([4.9, 4.7].includes(Number(scale.value))) {
      scale.value = scale.value.minus(0.2);
    } else {
      scale.value = scale.value.minus(0.7);
    }
    if (scale.value <= 1) {
      scale.value = new Big(1);
    }
  } else if (delta === -1) {
    // 放大
    if ([4.5, 4.7].includes(Number(scale.value))) {
      scale.value = scale.value.plus(0.2);
    } else if (scale.value.eq(4.9)) {
      return;
    } else {
      scale.value = scale.value.plus(0.7);
    }
  }

  if (scale.value.eq(4.7)) {
    isShowMark.value = true;
    // console.log("mark.value", mark.value);
    mark.value.style.opacity = 0.15;
    markTitle.value.style.opacity = 0.5;
    markTitle.value.classList.remove("top-[40%]");
    markTitle.value.classList.remove("top-[50%]");

    markTitle.value.classList.add("top-[45%]");
  } else if (scale.value.eq(4.9)) {
    isShowMark.value = true;
    mark.value.style.opacity = 0.3;
    markTitle.value.style.opacity = 1;
    markTitle.value.classList.remove("top-[45%]");
    markTitle.value.classList.add("top-[50%]");
    console.log(markTitle.value.classList);
  } else {
    isShowMark.value = false;
    markTitle.value.style.opacity = 0;
    // 实现回滚效果
    markTitle.value.classList.remove("top-[45%]");
    markTitle.value.classList.add("top-[40%]");
  }
  console.log("scale", scale.value.toString() - 0);
  myImage.value.style.transform = `scale(${scale.value})`;
};
</script>

<style lang="scss" scoped></style>
